@import "../../../../global";

.v-command {
    padding-top: 2px;

    .op-link[aria-disabled=true] {
        color: #d9d9d9 !important;

        &:hover {
            cursor: not-allowed;
            border: none;
        }
    }

    .op-link {
        background-color: white;

        padding-top: 2px;
        display: inline-block;
        text-align: center;

        &:hover {
            border-radius: 3px;
        }

        .ix-box.square(24px);

        .ix-text.hover-invert(#eb2f95);

        &:first-child {
            .ix-text.hover-invert(@button-brown)
        }

        &:last-child {
            .ix-text.hover-invert(#5dcd52)
        }

        i, svg {
            .ix-box.square(18px);
        }
    }
}

.t-command {
    .op-link[aria-disabled=true] {
        color: #d9d9d9 !important;

        &:hover {
            cursor: not-allowed;
            border: none;
        }
    }

    .op-link {
        position: absolute;
        top: 0;
        left: -14px;

        padding: 2px 2px 0 2px;
        border: solid 1px white;
        display: inline-block;
        text-align: center;

        background-color: #ECECEC;
        background-image: linear-gradient(0deg, hsla(0, 0%, 100%, .3) 1px, transparent 0),
        linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0),
        linear-gradient(0deg, white 2px, transparent 0),
        linear-gradient(90deg, white 2px, transparent 0);
        background-size: 5px 5px;

        &:hover {
            border-radius: 3px;
            border: solid 1px #8C8C8C;
        }

        svg {
            .ix-box.square(22px);
        }
    }
}

.c-command {
    float: right;

    .op-link[aria-disabled=true] {
        color: #d9d9d9 !important;

        &:hover {
            cursor: not-allowed;
            border: none;
        }
    }

    .op-link {
        display: inline-block;
        text-align: center;

        &:hover {
            border-radius: 3px;
        }

        .ix-box.square(22px);

        .ix-text.hover-border(#1874CD);

        &:first-child {
            .ix-text.hover-border(@button-brown);
        }

        &:last-child {
            .ix-text.hover-border(#eb2f95);
        }

        i, svg {
            .ix-box.square(18px);
        }
    }
}

.e-command {
    width: 27px;
    padding-top: 1px;
    background-color: white;

    .op-link[aria-disabled=true] {
        color: #d9d9d9 !important;

        &:hover {
            cursor: not-allowed;
            border: solid 1px white;
        }
    }

    .op-link {
        display: inline-block;
        text-align: center;
        padding-top: 1px;

        &:hover {
            border-radius: 3px;
        }

        .ix-box.square(24px);

        .ix-text.hover-border(#1874CD);

        &:first-child {
            .ix-text.hover-border(#5dcd52)
        }

        i, svg {
            .ix-box.square(18px);
        }
    }
}